<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/nav.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <title>导影</title>
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <input type="checkbox" id="check">
    <label class="checkbtn" for="check">
      <img class="checkbtn_img" src="images/ul.png" alt="列表">
    </label>
    <label>
      <img src="images/logo.png" alt="" class="logo_img">
    </label>
    <ul>
      <li><a class="action" href="#">精选</a></li>
      <li><a href="Subpage/TVseries/TVseries.html">电视剧</a></li>
      <li><a href="Subpage/Movie/movie.html">电影</a></li>
      <li><a href="Subpage/variety show/variety show.html">综艺</a></li>
      <li><a href="Subpage/Documentary/Documentary.html">纪录片</a></li>
      <li><a href="Subpage/table/table.html">注册/登录</a></li>
    </ul>
  </nav>
  <!-- 轮播图 -->
  <div class="banner">
    <!-- swiper插件 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="images/swp1.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="images/swp2.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="images/swp3.jpg" alt="" srcset="">

        </div>
        <div class="swiper-slide">
          <img src="images/swp4.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="images/swp5.jpg" alt="" srcset="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <!-- 内容块 -->
  <div class="content">
    <!-- 电视剧 -->
    <div class="TV_series">
      <div class="max_title">
        <a href="Subpage/TVseries/TVseries.html">
          电视剧
        </a>
      </div>
      <!-- 移动端 -->
      <div class="mobile_max">
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_1.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>完美伴侣</span>
            <span>高圆圆回轨 陷入中年爱情</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_2.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>别宠我·短剧首播</span>
            <span>少女为进冷宫花式怼皇帝</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_4.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>开端·1.11首播</span>
            <span>白敬亭赵今麦重启人生</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_5.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>雪中悍刀行</span>
            <span>张若昀胡军共赴江湖</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_6.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>镜·双城</span>
            <span>李易峰陈钰琪跨世虐恋</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_7.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>你是我的荣耀</span>
            <span>杨洋迪丽热巴共谱浪漫爱情</span>
          </div>
        </div>
      </div>
      <!-- PC端 -->
      <div class="pc_max">
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_1.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>完美伴侣</span>
            </a>
            <span>高圆圆回轨 陷入中年爱情</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_2.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>别宠我·短剧首播</span>
            </a>
            <span>少女为进冷宫花式怼皇帝</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_4.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>开端·1.11首播</span>
            </a>
            <span>白敬亭赵今麦重启人生</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_5.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>雪中悍刀行</span>
            </a>
            <span>张若昀胡军共赴江湖</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_6.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>镜·双城</span>
            </a>
            <span>李易峰陈钰琪跨世虐恋</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/tv_7.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>你是我的荣耀</span>
            </a>
            <span>杨洋迪丽热巴共谱浪漫爱情</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 电影 -->
    <div class="Movie">
      <div class="max_title">
        <a href="Subpage/Movie/movie.html">
          电影
        </a>
      </div>
      <!-- 移动端 -->
      <div class="mobile_max">
        <div class="pc_box">
          <div class="pc_main">
            <a href="Subpage/Subpage one/subpage.html">
              <div class="back_img">
                <img src="images/mv_1.jpg" class="back_img_wh">
              </div>
            </a>
          </div>
          <div class="introduce">
            <a href="Subpage/Subpage one/subpage.html">
              <span>铁道英雄</span>
              <span>张涵予范伟杀倭灭寇</span>
            </a>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <a href="Subpage/Subpage two/subpage.html">
              <div class="back_img">
                <img src="images/mv_2.jpg" class="back_img_wh">
              </div>
            </a>
          </div>
          <div class="introduce">
            <a href="Subpage/Subpage two/subpage.html">
              <span>长津湖·会员免费看</span>
              <span>还原抗美援朝史诗战役 </span>
            </a>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <a href="Subpage/Subpage three/subpage.html">
              <div class="back_img">
                <img src="images/mv_3.jpg" class="back_img_wh">
              </div>
            </a>
          </div>
          <div class="introduce">
            <a href="Subpage/Subpage three/subpage.html">
              <span>冰火凤</span>
              <span>复仇圣女痴心错付黑化反杀</span>
            </a>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/mv_4.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>南海鲛人</span>
            <span>神秘水怪强掳新婚少女</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/mv_5.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>古董局中局</span>
            <span>雷佳音李现破惊世破局</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/mv_6.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>复仇者联盟2:奥创纪元</span>
            <span>复联内讧危机初现 </span>
          </div>
        </div>
      </div>
      <!-- PC -->
      <div class="pc_max">
        <div class="pc_box">
          <div class="pc_main">
            <a href="Subpage/Subpage one/subpage.html">
              <div class="back_img">
                <img src="images/mv_1.jpg" class="back_img_wh">
              </div>
            </a>
          </div>
          <div class="introduce">
            <a href="Subpage/Subpage one/subpage.html">
              <span>铁道英雄</span>
            </a>
            <span>张涵予范伟杀倭灭寇</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <a href="Subpage/Subpage two/subpage.html">
              <div class="back_img">
                <img src="images/mv_2.jpg" class="back_img_wh">
              </div>
            </a>
          </div>
          <div class="introduce">
            <a href="Subpage/Subpage two/subpage.html">
              <span>长津湖·会员免费看</span>
            </a>
            <span>还原抗美援朝史诗战役 </span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <a href="Subpage/Subpage three/subpage.html">
              <div class="back_img">
                <img src="images/mv_3.jpg" class="back_img_wh">
              </div>
            </a>
          </div>
          <div class="introduce">
            <a href="Subpage/Subpage three/subpage.html">
              <span>冰火凤</span>
            </a>
            <span>复仇圣女痴心错付黑化反杀</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/mv_4.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>南海鲛人</span>
            </a>
            <span>神秘水怪强掳新婚少女</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/mv_5.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>古董局中局</span>
            </a>
            <span>雷佳音李现破惊世破局</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/mv_6.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>复仇者联盟2:奥创纪元</span>
            </a>
            <span>复联内讧危机初现 </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 综艺 -->
    <div class="variety_show">
      <div class="max_title">
        <a href="Subpage/variety show/variety show.html">
          综艺
        </a>
      </div>
      <!-- 移动端 -->
      <div class="mobile_min">
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_1.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>脱口秀大会 第4季</span>
            </a>
            <span>何广智爆笑聊追女生日常</span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_2.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>嗨放派</span>
            </a>
            <span>李荣浩自曝早年尴尬经历 </span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_3.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>德云斗笑社 第2季</span>
            </a>
            <span>德云社内卷开始了</span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_4.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>2021中国好声音</span>
            </a>
            <span>港风美女唱《海阔天空》 </span>
          </div>
        </div>
      </div>
      <!-- PC -->
      <div class="pc_min">
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_1.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>脱口秀大会 第4季</span>
            </a>
            <span>何广智爆笑聊追女生日常</span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_2.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>嗨放派</span>
            </a>
            <span>李荣浩自曝早年尴尬经历 </span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_3.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>德云斗笑社 第2季</span>
            </a>
            <span>德云社内卷开始了</span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_4.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>2021中国好声音</span>
            </a>
            <span>港风美女唱《海阔天空》</span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_5.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>脱口秀小会 第2季</span>
            </a>
            <span>何广智母胎solo</span>
          </div>
        </div>
        <div class="min_box">
          <div class="min_img">
            <img src="images/jl_6.jpg" class="back_img_wh">
          </div>
          <div class="introduce">
            <a href="#">
              <span>德云下班后</span>
            </a>
            <span>杨九郎尚九熙唯爱干脆面 </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 纪录片 -->
    <div class="Documentary">
      <div class="max_title">
        <a href="Subpage/Documentary/Documentary.html">
          纪录片
        </a>
      </div>
      <!-- 移动端 -->
      <div class="mobile_max">
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_1.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>风味人间</span>
            <span>全球视野下恢弘中华美食文化之旅</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_2.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>人生第一次</span>
            <span>生命尽头该如何告别？</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_3.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>如果国宝会说话 第3季</span>
            <span>国宝带你梦回大唐</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_4.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>完美星球</span>
            <span>世界之大，带你神游</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_5.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>敦煌：生而传奇</span>
            <span>烽鼓不息 血与火之路</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_6.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <span>紫禁城</span>
            <span>看六百年世事沉浮，寻五千年华夏之魂</span>
          </div>
        </div>
      </div>
      <!-- PC -->
      <div class="pc_max">
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_1.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>风味人间</span>
            </a>
            <span>全球视野下恢弘中华美食文化之旅</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_2.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>人生第一次</span>
            </a>
            <span>生命尽头该如何告别？</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_3.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>如果国宝会说话 第3季</span>
            </a>
            <span>国宝带你梦回大唐</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_4.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>完美星球</span>
            </a>
            <span>世界之大，带你神游</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_5.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>敦煌：生而传奇</span>
            </a>
            <span>烽鼓不息 血与火之路</span>
          </div>
        </div>
        <div class="pc_box">
          <div class="pc_main">
            <div class="back_img">
              <img src="images/jilu_6.jpg" class="back_img_wh">
            </div>
          </div>
          <div class="introduce">
            <a href="#">
              <span>紫禁城</span>
            </a>
            <span>看六百年世事沉浮，寻五千年华夏之魂</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 页脚 -->
  <footer>
    <div class="foot_content">
      <p>本网站仅用于交流学习</p>
    </div>
  </footer>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/index.js"></script>
</body>

</html>